/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import styles from '../ss.module.scss'
import { WingBlank,Flex } from 'antd-mobile';
import {getNews} from '../../../api/index'
// const PlaceHolder = ({ className = '', ...restProps }) => (
//     <div className={`${className} placeholder`} {...restProps}>Block</div>
//   );
export default class Message extends Component {
    state ={
        // 最新资讯
        news:[],
         // 这里是从轮播图页面拿到的code地图地址码
        cityArea:this.props.cityArea
    }
    async getNews(){
      console.log('这个是咨询的code',this.state.cityArea);
        const res = await getNews({
            area:this.state.cityArea
        })
        this.setState({
            news:res.data.body
          })
    }
    componentDidMount(){
        this.getNews()
    }
    // 渲染最新资讯
    rederNews(){
        return this.state.news.map(item => (
        <div className={styles.newsitem} key={item.id}>
            <div className={styles.imgwrap} >
                <img src={`http://localhost:8080${item.imgSrc}`} />
            </div>
            <Flex className={styles.content} direction='column' justify='between'>
                <h3 className={styles.title}> {item.title}</h3>
                <Flex className={styles.info} justify='between'>
                    <span>{item.from}</span>
                    <span>{item.date}</span>
                </Flex>
            </Flex>
        </div>
        ))
    }
    // 获取资讯
  render() {
    return (
      <div className={styles.news}>
        {/* 资讯 */}
        <h3>最新资讯</h3>
        <WingBlank size="md">
          { this.rederNews()}
        </WingBlank>
      </div>
    )
  }
}
